{extend name="base" /}
{block name="body"}
<div class="layui-card">
    <div class="layui-card-body">
        <blockquote class="layui-elem-quote layui-text">
            账目统计说明：<span class="text-danger">会员总账目占比</span><span class="text-danger"></span>
        </blockquote>
        <div id="container" style="height:600px"></div>
        <div id="main" style="height:600px;"></div>
    </div>
</div>
{/block}
{block name="js"}
{js href="__JS__/echarts.min.js,__JS__/wonderland.js" /}
<script type="text/javascript">
setTimeout(getViews,300);
setInterval(getViews,60000);
function getViews()
{
    $.post('get_account.html',function(res){
        var myChart = echarts.init(document.getElementById('main'), 'wonderland');
        var res = $.parseJSON(res);
        myChart.setOption({
            title: {
                text: '会员总账目',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '来源',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: res.account
                }
            ]
        });
        var myChart = echarts.init(document.getElementById('container'), 'wonderland');
            myChart.setOption({
            title: {
                text: '每日收支统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                splitLine: {show: false},
                data: res.date
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '收入',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    data: res.income
                },
                {
                    name: '支出',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    data: res.expend
                }
            ]
        });
    });
}
</script>
{/block}